<template>
  <div style="position: relative">
    <Header></Header>
    <div class="s_bg">
      <div class="scd">
        <div class="b_h">
          <div class="name">
            <i class="el-icon-circle-plus" aria-hidden="true"></i>
            <span>药品平台</span>
          </div>
          <div class="pst">
            当前所在位置: <a @click.prevent="goHome">首页</a>&gt;<a class="on"
              >药品平台</a
            >
          </div>
        </div>
      </div>
    </div>
    <div style="width: 1280px; height: 30px; margin: 10px auto">
      <ul>
        <li
          style="list-style-type: none"
          v-for="drug in drugArrs"
          :key="drug.id"
        >
          <el-popover placement="right" width="200" trigger="click">
            <div>
              <div>
                <span
                  style="margin-right: 20px; cursor: pointer"
                  v-for="(arr, index) in byTypeArr"
                  :key="index"
                  ><router-link
                    :to="{
                      name: 'detail',
                      query: { drugType: drug.title, drugName: arr },
                    }"
                    >{{ arr }}</router-link
                  ></span
                >
              </div>
            </div>
            <el-button slot="reference" @click="getAll(drug)">{{
              drug.title
            }}</el-button>
          </el-popover>
        </li>
      </ul>
      <div style="position: absolute; margin-top: -450px; margin-left: 200px">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header/Header";
export default {
  name: "drugs",
  components: { Header },
  data() {
    return {
      visible: false,
      drugArrs: [
        { id: 1, title: "感冒用药" },
        { id: 2, title: "避孕用药" },
        { id: 3, title: "妇科用药" },
        { id: 4, title: "肝胆疾病" },
        { id: 5, title: "皮肤科药" },
        { id: 6, title: "胃肠疾病" },
        { id: 7, title: "五官科药" },
        { id: 8, title: "风湿用药" },
        { id: 9, title: "外科用药" },
        { id: 10, title: "小儿疾病" },
        { id: 11, title: "消化不良" },
        { id: 12, title: "跌打损伤" },
        { id: 13, title: "便秘用药" },
      ],
      byTypeArr: [],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    goHome() {
      this.$router.push("/home");
    },
    getAll(drug) {
      this.byTypeArr = [];
      let arr = [];
      this.$axios
        .get("/Drugs/getAlldrug_bytype", {
          params: {
            Drug_type: drug.title,
          },
        })
        .then((res) => {
          for (let i = 0; i < res.data.data.length; i++) {
            arr.push(res.data.data[i].drugName);
            this.byTypeArr = arr;
          }
        });
    },
  },
};
</script>

<style scoped>
a {
  text-decoration: none;
  position: absolute;
  position: relative;
}
.scd .b_h .pst {
  position: static;
  text-align: left;
  width: 90%;
  height: auto;
  line-height: 150%;
  padding: 15px 5%;
}
.scd .b_h .name,
.scd_em .b_h .name {
  width: 260px;
}
.scd .b_h,
.scd_em .b_h {
  width: 90%;
  height: 60px;
  line-height: 60px;
  margin-left: 90px;
  margin-top: 30px;
  border-bottom: 1px solid #bbb;
  position: relative;
  text-align: left;
  position: relative;
}
.scd .b_h .name,
.scd_em .b_h .name {
  display: inline-block;
  *display: inline;
  zoom: 1;
  height: 60px;
  line-height: 60px;
  color: #fff;
  background: #0051ad;
  padding: 0 30px;
}
.scd .b_h .name img,
.scd .b_h .name span,
.scd_em .b_h .name img,
.scd_em .b_h .name span {
  display: inline-block;
  *display: inline;
  zoom: 1;
  height: 41px;
  line-height: 41px;
  vertical-align: top;
  margin-top: 10px;
  font-size: 24px;
  color: #fff;
}
.scd .b_h .name img,
.scd_em .b_h .name img {
  width: 41px;
  height: 41px;
  margin-right: 3px;
}
.scd .b_h .pst,
.scd_em .b_h .pst {
  width: 60%;
  text-align: right;
  position: absolute;
  right: 10px;
  top: 0px;
  font-size: 14px;
  color: #555555;
  height: 60px;
  line-height: 60px;
}
.scd .b_h .pst a,
.scd_em .b_h .pst a {
  font-size: 14px;
  color: #555;
}
.scd .b_h .pst a.on,
.scd .b_h .pst a:hover,
.scd_em .b_h .pst a.on,
.scd_em .b_h .pst a:hover {
  color: #0257b9;
}
.pst {
  width: 60%;
  text-align: right;
  position: absolute;
  margin-top: -10px;
  margin-left: 300px;
  font-size: 14px;
  color: #555555;
  height: 60px;
  line-height: 60px;
}
.pst a {
  font-size: 14px;
  color: #555;
}
.pst a:hover,
.scd_em .b_h .pst a.on,
.scd_em .b_h .pst a:hover {
  color: #0257b9;
}
a.on {
  color: #0257b9;
}
</style>
